<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度新闻——海量中文咨询平台</title>
</head>

<body>
    <!-- 页头 -->
    <header>
        <!-- 最顶部区域 -->
        <div>
            <ul>
                <li><a href="">网页</a></li>
                <li><a href="">新闻</a></li>
                <li><a href="">贴吧</a></li>
                <li><a href="">知道</a></li>
                <li><a href="">音乐</a></li>
                <li><a href="">图片</a></li>
                <li><a href="">视频</a></li>
                <li><a href="">地图</a></li>
                <li><a href="">文库</a></li>
            </ul>

            <ul>

                <li> <a href="">百度首页</a></li>
                <li> <a href="">用户名</a>
                    <ul>
                        <li><a href="">我的主页</a></li>
                        <li><a href="">账号设置</a></li>
                        <li><a href="">退出</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">
                        <span>百度新闻客户端</span>
                    </a>
                    <a href="">
                        <img src="./img/sncode.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <!-- 搜索区域 -->
        <div>
            <div>
                <h1>
                    <a href="">
                        百度新闻
                        <img src="./img/logo.png" alt="">
                    </a>
                </h1>
            </div>
            <div>
                <input type="text">
                <button>百度一下</button>
            </div>
            <div>
                <a href="">帮助</a>
            </div>
        </div>
        <!-- 页面导航 -->
        <div>
            <!-- nav元素 html5的新元素，容器元素，语义就是导航-->
            <nav>
                <a href="">首页</a>
                <a href="">国内</a>
                <a href="">国际</a>
                <a href="">军事</a>
                <a href="">财经</a>
            </nav>
            <!-- <nav>
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">国内</a></li>
                    <li><a href="">国际</a></li>
                    <li><a href="">军事</a></li>
                    <li><a href="">财经</a></li>
                </ul>
            </nav> -->
        </div>
    </header>

    <!-- 中部区域 -->
    <div>
        <!-- 热点要闻 -->
        <div>
            <!-- 左边 -->
            <div>
                <!-- 标题 -->
                <div>
                    <h2>热点要闻</h2>
                </div>
                <!-- 多个新闻列表 ul*5>(li>h3>a>lorem5)+(li*6>a>lorem5) tab键生成 -->
                <div>
                    <ul>
                        <li>
                            <h3><a href="">Lorem ipsum dolor sit amet.</a></h3>
                        </li>
                        <li><a href="">Lorem ipsum dolor sit amet.</a></li>
                        <li><a href="">Numquam consequuntur quisquam aut reiciendis.</a></li>
                        <li><a href="">Optio quaerat distinctio ab doloribus?</a></li>
                        <li><a href="">Ad praesentium fuga suscipit voluptates?</a></li>
                        <li><a href="">Laudantium velit aperiam libero consequatur.</a></li>
                        <li><a href="">Amet fugiat tempore delectus molestiae?</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h3><a href="">Maxime alias quis iusto delectus.</a></h3>
                        </li>
                        <li><a href="">Aut quibusdam repellendus tenetur consequuntur.</a></li>
                        <li><a href="">Sequi ratione explicabo alias itaque.</a></li>
                        <li><a href="">Voluptatum fugiat magni iste consequatur.</a></li>
                        <li><a href="">Accusantium non ipsa dolores cupiditate.</a></li>
                        <li><a href="">Veniam voluptas tempore consequatur nemo.</a></li>
                        <li><a href="">Suscipit aut expedita illum dolorem.</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h3><a href="">Ullam voluptatem perferendis vel deleniti.</a></h3>
                        </li>
                        <li><a href="">Laboriosam esse vel cupiditate autem!</a></li>
                        <li><a href="">Iusto quis minima deserunt ut?</a></li>
                        <li><a href="">Quo, consequuntur laudantium? Ut, delectus?</a></li>
                        <li><a href="">Eum mollitia commodi non quae!</a></li>
                        <li><a href="">Numquam quasi nobis dolorum a.</a></li>
                        <li><a href="">Accusantium tempore excepturi hic illum.</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h3><a href="">Dolorum, tempora? In, sit corrupti?</a></h3>
                        </li>
                        <li><a href="">Modi esse natus aperiam consequatur.</a></li>
                        <li><a href="">Cupiditate illo delectus vitae dignissimos.</a></li>
                        <li><a href="">Sapiente culpa aut quis dolores?</a></li>
                        <li><a href="">Nesciunt itaque assumenda odit qui!</a></li>
                        <li><a href="">Tempora rem facere nostrum sint?</a></li>
                        <li><a href="">Fuga unde nam architecto eligendi.</a></li>
                    </ul>
                    <ul>
                        <li>
                            <h3><a href="">Repellat dolorum quos provident expedita.</a></h3>
                        </li>
                        <li><a href="">Deserunt qui voluptas quas dolore.</a></li>
                        <li><a href="">Nobis dicta cupiditate velit adipisci.</a></li>
                        <li><a href="">Sunt adipisci molestiae consequatur enim?</a></li>
                        <li><a href="">Sapiente, minima. Tempore, reiciendis perferendis.</a></li>
                        <li><a href="">Corrupti id ipsa optio ducimus.</a></li>
                        <li><a href="">Consequatur ratione iusto reiciendis praesentium.</a></li>
                    </ul>
                </div>
            </div>
            <!-- 右边 -->
            <div>
                <!-- 幻灯片、轮播图 -->
                <div>
                    <!-- 幻灯片、轮播图主体 -->
                    <div>
                        <!-- 放置图片 -->
                        <div>
                            <div>
                                <a href="">
                                    <img src="./img/banner/banner1_20190720_170358.jpg" alt="">
                                    <h3>Lorem ipsum dolor sit amet.</h3>
                                </a>
                            </div>
                            <div>
                                <a href="">
                                    <img src="./img/banner/banner2.jpg" alt="">
                                    <h3>Lorem ipsum dolor sit amet.</h3>
                                </a>
                            </div>
                        </div>
                        <!-- 左右切换的按钮 -->
                        <div>
                            <span>&lt;</span>
                            <span>&gt;</span>
                        </div>
                        <!-- 切换的小圆圈 -->
                        <ul>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <!-- 附加链接 -->
                    <div>
                        <a href="">
                            <img src="./img/adv1.png" alt="">
                        </a>
                        <a href="">
                            <img src="./img/adv2.jpg" alt="">
                        </a>
                    </div>
                </div>

                <!-- 热搜词 -->
                <div>
                    <div>
                        <h3>
                            热搜新闻词
                            <span>HOT WORDS</span>
                            <!-- 下面这个span元素是一个图标 -->
                            <span></span>
                        </h3>
                    </div>
                    <ul>
                        <li>Lorem.</li>
                        <li>Ad?</li>
                        <li>Omnis!</li>
                        <li>Aliquid?</li>
                        <li>Voluptatibus.</li>
                        <li>Sapiente?</li>
                        <li>Ullam?</li>
                        <li>Perspiciatis!</li>
                        <li>Sapiente?</li>
                        <li>Non?</li>
                    </ul>
                </div>

                <!-- 百家号 -->
                <div>
                    <div>
                        <h3>
                            百家号
                            <span>BALJIA</span>
                            <!-- 下面这个span元素是一个图标 -->
                            <span></span>
                        </h3>
                    </div>
                    <div>
                        <!-- 左边 ul>li*4>a>(span>lorem4)+img[src="./img/test.jpg"]-->
                        <div>
                            <ul>
                                <li><a href=""><span>Lorem ipsum dolor sit.</span><img src="./img/test.jpg" alt=""></a>
                                </li>
                                <li><a href=""><span>Ab voluptatem est dolorum?</span><img src="./img/test.jpg"
                                            alt=""></a></li>
                                <li><a href=""><span>Voluptas quaerat iure labore.</span><img src="./img/test.jpg"
                                            alt=""></a></li>
                                <li><a href=""><span>Iusto saepe quisquam voluptatum.</span><img src="./img/test.jpg"
                                            alt=""></a></li>
                            </ul>
                        </div>
                        <!-- 右边 ul*3>li*6>a>lorem5-->
                        <div>
                            <ul>
                                <li><a href="">Lorem ipsum dolor sit amet.</a></li>
                                <li><a href="">Placeat amet nisi sit dignissimos?</a></li>
                                <li><a href="">Odio neque officia quisquam optio?</a></li>
                                <li><a href="">Deserunt placeat quisquam laudantium dicta.</a></li>
                                <li><a href="">Ullam excepturi adipisci similique placeat!</a></li>
                                <li><a href="">Dolorem suscipit officia magni aut.</a></li>
                            </ul>
                            <ul>
                                <li><a href="">Porro expedita amet recusandae sunt.</a></li>
                                <li><a href="">Ab quo officiis asperiores architecto.</a></li>
                                <li><a href="">Explicabo, sunt! Perspiciatis, assumenda voluptatem.</a></li>
                                <li><a href="">Quo atque voluptatem esse magnam!</a></li>
                                <li><a href="">Est magnam veritatis amet cumque?</a></li>
                                <li><a href="">Vel culpa soluta dolorem maiores.</a></li>
                            </ul>
                            <ul>
                                <li><a href="">Consequuntur incidunt expedita quod recusandae?</a></li>
                                <li><a href="">Dicta provident nemo odio unde?</a></li>
                                <li><a href="">Dolores quibusdam velit quae sequi?</a></li>
                                <li><a href="">Fugiat pariatur quas eos odit.</a></li>
                                <li><a href="">Temporibus, explicabo. Minus, iure provident?</a></li>
                                <li><a href="">Deserunt sequi harum cum repellat?</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 侧边栏 -->
    <aside>

    </aside>

    <!-- 页脚 -->
    <footer>
        <!-- 上面 -->
        <div>
            <!-- 左边 -->
            <div>
                <div>更多精彩内容</div>
                <div>
                    <div>
                        <img src="./img/sncode.png" alt="">
                    </div>
                    <div>
                        <a href="">Android下载</a>
                        <a href="">Iphone下载</a>
                    </div>
                </div>
                <div>
                    扫描二维码，收看更多新闻
                </div>
            </div>
            <!-- 右边 -->
            <div>
                <h4>百度新闻独家出品</h4>
                <ul>
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Aperiam itaque natus veritatis neque?</li>
                    <li>At voluptates aliquam quisquam blanditiis.</li>
                </ul>
            </div>
        </div>
        <!-- 下面 -->
        <div>
            <p>
                责任编辑：胡彦BN098 刘石娟BN068 谢建BN085 李芳雨BN091 储信艳BN087 焦碧碧BN084 禤聪BN095 王鑫BN060 崔超BN071
                违法和不良信息举报电话：400-921-6911
            </p>
            <p>
                <a href="">用户协议</a>
                <a href="">隐私策略</a>
                <a href="">投诉中心</a>
                京公网安备11000002000001号
                <a href="">互联网新闻信息服务许可 </a>
                ©2019Baidu
                <a href="">使用百度前必读</a>

                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </p>
        </div>
    </footer>
</body>

</html>